<template>
  <div>
    <div>
	  <Card :bordered="false" dis-hover class="ivu-mt card-style">
		  <div class="step-bg">
			  <div class="st-bg">
				  <img class="icon" src="../../../assets/images/main/icon-step1.png"/>
				  <span class="text">添加想要分析的画像群</span>
			  </div>
			  <img class="arrow" src="../../../assets/images/main/step-arrow.png"/>
			  <div class="st-bg">
				  <img class="icon" src="../../../assets/images/main/icon-step2.png"/>
				  <span class="text">添加画像指标</span>
			  </div>
			  <img class="arrow" src="../../../assets/images/main/step-arrow.png"/>
			  <div class="st-bg">
				  <img class="icon" src="../../../assets/images/main/icon-step3.png"/>
				  <span class="text">保存并完成画像报告创建</span>
			  </div>
		  </div>
		  <div class="btn-bg">
			  <Button type="primary" @click="addImage()" class="button">添加画像群</Button>
		  </div>
	  </Card>
    </div>
	
    <!-- <Card :bordered="false" dis-hover class="ivu-mt card-style">
		
    </Card> -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { cmsListApi } from '@/api/cms';
import { formatDate } from '@/utils/validate';
export default {
  name: 'case',
  data() {
    return {
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      artFrom: {
        pid: 0,
        title: '',
        page: 1,
        limit: 20,
      },
      
    };
  },
  components: {
	  
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 105;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  created() {},
  activated() {
   
  },
  methods: {
    
  },
};
</script>

<style scoped lang="stylus">
.treeSel >>>.ivu-select-dropdown-list {
  padding: 0 10px !important;
  box-sizing: border-box;
}

.ivu-table th{
	background-color: #CCC!important;
}
.ivu-table-header table{
	border-top: none!important;
}


.card-style{
	// padding: 10px 20px 20px 20px;
	background: hsla(0,0%,100%,.502);
	border: 2px solid #fff!important;
	border-radius: 8px
}

.step-bg{
	display: flex;
	flex-direction: row;
	align-items: center;
	
	.st-bg{
		display: flex;
		flex-direction: column;
		align-items: center;
		.icon{
			// width:308px;
			// height:308px;
			width: 100%;
		}
		.text{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24px;
			color: #333333;
			margin-top: 15px;
		}
	}
	.arrow{
		width: 60px;
		height: 31px;
		margin-left: 50px;
		margin-right: 50px;
	}
}
.btn-bg{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 120px;
	margin-bottom: 100px;
	.button{
		width: 200px;
		height: 50px;
		background: #2774F4;
		border-radius: 8px 8px 8px 8px;
		margin: 0px;
		padding: 0px;
	}
}
</style>
